<!--
  名称：基础地图组件
  用途：基于openlayers封装的通用地图组件
  作者：王禹
 -->
 <!--中间的弹窗，外层和部分设置，添加注释时间2018.11.08-->
<template>
  <!-- 全部主容器 -->
  <div style="height:100%;width:'100%'" class="main_center map_center">
    <!-- 弹出面板容器，使用绝对定位覆盖在主地图上，内部元素使用相对定位完成布局 -->
    <div style="position: absolute;top:0px;left:0px;right:0px;bottom: 0px;">
      <!-- 弹窗插槽 -->
      <slot/>
    </div>
    <!--地图主容器 -->
    <div id="_map"></div>
    <!--点击地图上的点弹窗,添加拖拽事件 -->
    <div v-drag id="popup" class="ol-popup tu11" style=""><!--position: fixed;left: 25%;top: 15%;-->
      <!-- 关闭按钮 -->
      <a href="#" id="popup-closer" class="ol-popup-closer" style="color:#fff;z-index:2;display:inline;" @click="closeOLPopup()"></a>
      <!-- 内容容器 -->
      <div id="popup-content" style="display:inline;">
        <!-- 内容使用插槽 -->
        <slot name="ol-popup" />
      </div>
    </div>
    <!-- 鼠标指针监听容器 <div class="right_down" style="position:fixed;bottom:12px;right:70px;" id="mouse-position"></div> -->
    <slot name="openTagButton" />
  </div>
</template>

<script>
import olproj from 'ol/proj'
import Map from 'ol/map'
import View from 'ol/view'
// import TileLayer from 'ol/layer/tile'
// import TileArcGISRest from 'ol/source/TileArcGISRest'
// import TileGrid from 'ol/tilegrid/tilegrid'
// import TileImage from 'ol/source/tileimage'
// import olcontrol from 'ol/control'
// import MousePosition from 'ol/control/MousePosition'
// import coordinate from 'ol/coordinate'
// import Overlay from 'ol/Overlay'
// import Select from 'ol/interaction/Select'
// import Vue from 'vue'

// import Text from 'ol/style/Text'
// import Fill from 'ol/style/fill'
// import Stroke from 'ol/style/stroke'
// import Feature from 'ol/feature'
// import Style from 'ol/style/style'
// import Icon from 'ol/style/Icon'
// import VectorSource from 'ol/source/vector'
// import Point from 'ol/geom/point'
// import VectorLayer from 'ol/layer/vector'
import GeoJSON from 'ol/format/GeoJSON'

import { mapGetters } from 'vuex'

import mapSource from './mapSource'
export default {
  data (vm) {
    return {
      // 动态ID
      mapContainerId: vm.$createGUID(),
      map: {},
      // 中心点
      centerPoint: {},
      // 描点的状态
      tracingPointState: {},
      // 描点图层
      tracingPointLayers: {},
      // geoJSON解析器
      geoJSON: {},
      select: {},
      popup_coordinate: {}
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'getLayerArray',
      'getOverlay',
      'selectedFeatureValues',
      'getBaseMapLayers'
    ])
  },
  // 在实例创建以后，初始化全部组件状态数据
  created: function () {
    this.geoJSON = new GeoJSON()
    // 初始化面板状态
  },
  methods: {
    click: function () {
      // this.plan_layer.setSaturation(this.plan_layer.getSaturation() + 0.25);
      // this.plan_layer.setHue(this.plan_layer.getHue() - 0.25)

      for (let baseLayer of this.getBaseMapLayers) {
        baseLayer.setHue(this.plan_layer.getHue() - 0.25)
      }
    },
    // 关闭地图弹出面板
    closeOLPopup: function () {
      this.$store.dispatch('closeOLPopup', undefined)
      // 触发关闭气泡事件
      this.$emit('closeOLPopup')
      return false
    },
    // 创建覆盖层创建覆盖层
    formatOverlay: function () {
      let pointLayerArray = this.getLayerArray()
      window.getLayerArray = this.getLayerArray
      // 保存this对象，在监听回调中this会发生变化
      let _this = this
      let layers = this.map.getLayers()
      // 创建地图
      this.map.removeLayer()
      pointLayerArray.forEach(element => {
        _this.map.addLayer(element)
      })
    },
    // 添加图层
    addPointLayers: function () {
      // 存在传入配置的场合，这样就可以同时兼容传入和全局数据
      if (this.tracingPointOptions) {
        // 创建图层数据
        this.$store.dispatch('createPointLayers', this.tracingPointOptions)
      }
      this.formatOverlay()
    }
  },
  mounted: function () {
    //
    // 鼠标指针监听
    // var mousePositionControl = new MousePosition({
    //   coordinateFormat: coordinate.createStringXY(6),
    //   projection: "EPSG:4326",
    //   // comment the following two lines to have the mouse position
    //   // be placed within the map.
    //   className: "custom-mouse-position",
    //   target: document.getElementById("mouse-position"),
    //   undefinedHTML: "&nbsp;"
    // });
    // 容器
    var popupContainer = document.getElementById('popup')
    // 创建弹窗
    this.$store.dispatch('createPopup', popupContainer)
    // 创建底图
    this.$store.dispatch('initBaseMapLayers', mapSource)
    const _this = this
    // 地图参数
    let option = {
      // controls: olcontrol
      //   .defaults({
      //     attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      //       collapsible: false
      //     })
      //   })
      //   .extend([mousePositionControl]),
      logo: false,
      layers: [...this.getBaseMapLayers],
      target: '_map',
      overlays: [this.getOverlay],
      view: new View({
        // [114.30878471, 30.591228],
        center: olproj.transform(
          [114.30878471, 30.591228],
          'EPSG:4326',
          // 正式
          'EPSG:3857'
        ),
        zoom: 11
      })
    }
    // 创建地图
    this.map = new Map(option)
    window.map00 = this.map
    _this.$store.dispatch('setMapObj', this.map)
    _this.addPointLayers()
    let pointLayerArray = _this.getLayerArray({ interaction: true })
    _this.$store.dispatch('registerSelectObj', {
      pointLayerArray,
      selectCallback: _this.selectCallback
    })
  },
  watch: {
    getLayerArray: function () {
      // 初始化覆盖层
      this.formatOverlay()
    }
  },
  components: {},
  // 组建接受的传入参数
  props: [
    // 地图数据来源
    'mapSourceUrl',
    // 描点被点击事件的回调函数
    'selectCallback'
  ]
}
</script>
<style scoped>
#popup{
  position: relative!important;
}
</style>
<style>
@import "./css/main.css";
@import "./css/map.css";
@import "./../../assets/css/ol.css";
#_map {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}
</style>
